<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
    <script src="js/data.js"></script>
</head>
<body>

<select id="province" onchange="proChange(this.value)">
    <option>请选择</option>
</select>

<select id="city" onchange="cityChange(this.value)">
    <option>请选择</option>
</select>

<select id="county">
    <option>请选择</option>
</select>

</body>
<script>
    //加载省数据
    //获取省列表框
    let prostr="";
    let provinceText = document.getElementById("province");
    let cityText = document.getElementById("city");
    let countyText = document.getElementById("county");
    let count=0;
    data.forEach(function (datas) {
        if(datas.parentid=="0"){
            //省则输出到省文本框
            prostr += "<option value='"+datas.codeid+"' >"+datas.cityName+"</option>";
            provinceText.innerHTML= prostr;
            count++;
            if(count==1){
                proChange(datas.codeid);
            }
         }
    })


    function proChange(a){
        citystr="";
        let count=0;
        data.forEach(function (city) {
            if(a==city.parentid){
                //省的id等于市的父id，则为下辖市
                //输出到市的下拉框
                citystr +="<option value='"+city.codeid+"'>"+city.cityName+"</option>";
                cityText.innerHTML = citystr;
                count++;
                if(count==1){
                    cityChange(city.codeid);
                }
            }

        })

    }

    function cityChange(a) {
        counstr="";
        data.forEach(function (coun) {
            if(a==coun.parentid){
                //省的id等于市的父id，则为下辖市
                //输出到市的下拉框
                counstr +="<option>"+coun.cityName+"</option>";
                countyText.innerHTML = counstr;
            }
        })

    }


</script>
</html>